<template>
	<view class="tab-bar-container flex-between">
		<view class="tab-bar-item flex-column-center" v-for="(item,index) in lists" :key="index"
			@click="handleSelectTabBar(item,index)">
			<image class="tab-bar-item-img" :src="selected==index?item.selectedIconPath:item.iconPath" mode=""></image>
			<text class="tab-bar-item-text" :class="selected==index?'active':''">{{item.text}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		props: ['selected'],
		data() {
			return {
				lists: [{
						"pagePath": "/pages/home/home",
						"iconPath": "/static/img/home.png",
						"selectedIconPath": "/static/img/home-active.png",
						"text": "首页"
					},
					{
						"pagePath": "/pages/msg/msg",
						"iconPath": "/static/img/msg.png",
						"selectedIconPath": "/static/img/msg-active.png",
						"text": "消息"
					},
					{
						"pagePath": "/pages/rdr/rdr",
						"iconPath": "/static/img/rdr.png",
						"selectedIconPath": "/static/img/rdr.png",
						"text": "公益招聘"
					},
					{
						"pagePath": "/pages/main/main",
						"iconPath": "/static/img/main.png",
						"selectedIconPath": "/static/img/main-active.png",
						"text": "主页"
					},
					{
						"pagePath": "/pages/user/user",
						"iconPath": "/static/img/seting.png",
						"selectedIconPath": "/static/img/seting-active.png",
						"text": "我的"
					}
				]

			}
		},
		methods: {
			handleSelectTabBar(item, index) {
				let url = item.pagePath
				this.lists.forEach((list, i) => {
					if (index == i) {
						url = list.pagePath
					}
				})
				uni.switchTab({
					url
				})
			}
		}
	}
</script>

<style lang="scss">
	.tab-bar-container {
		width: 100%;
		height: 120rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		background-color: #034462;
		color: #fff;

		.tab-bar-item {
			.tab-bar-item-img {
				width: 40rpx;
				height: 40rpx;
			}

			.tab-bar-item-text {
				font-size: 28rpx;
				margin-top: 8rpx;
			}

			.active {
				color: rgb(185, 69, 53);
			}
		}
	}
</style>